import React from "react";
import { Switch, message } from "antd";
import SetButton from "../SetBtton";
import { inject, observer } from "mobx-react";

const HOCSetDelivery = (WarpComponent) => {
  @inject("setStoreInfo")
  @observer
  class ElementComponent extends React.Component {
    state = {
      data: [],
      columns: [
        {
          title: "ID",
          dataIndex: "modId",
          align: "center",
        },
        {
          title: "名称",
          dataIndex: "modName",
          align: "center",
        },
        {
          title: "值",
          dataIndex: "modValue",
          align: "center",
        },
        {
          title: "启用",
          dataIndex: "modStatu",
          align: "center",
          render: (text, recode) => (
            <Switch
              defaultChecked={recode?.modStatu}
              onChange={(checked) => this.changeIsUse(checked, recode)}
            ></Switch>
          ),
        },
        {
          title: "操作",
          align: "center",
          render: (text, record) => (
            <SetButton
              txt="修改"
              onClick={() => this.modifyDistribute(record)}
            ></SetButton>
          ),
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 5,
        hideOnSinglePage: true,
      },
      isModalVisible: false,
      modelTitle: null,
    };
    componentDidMount() {
      this.getInitData();
    }
    getInitData = () => {
      let { getDistributeSet } = this.props.setStoreInfo;
      getDistributeSet().then((data) => {
        if (data.data.code === 200) {
          let allData = data.data.data;
          allData.forEach((element) => {
            element.key = element.modId;
          });
          let obj = this.state;
          obj.data = allData;
          this.setState(obj);
        } else {
          message.error("查询数据失败");
        }
      });
    };
    //改变启用状态
    changeIsUse = (checked, recode) => {
      let { isUseDistribute } = this.props.setStoreInfo;
      let modStatu = checked ? 0 : 1;
      let { modId } = recode;
      let formData = {
        modId,
        modStatu,
      };
      isUseDistribute(formData).then((data) => {
        if (data.data.code === 200) {
          message.success("操作成功");
        } else {
          message.error("操作失败");
        }
      });
    };
    //点击确定
    handleOk = () => {
      if (this.state.modelTitle === "修改配送方式") {
        this.sureModify();
      } else {
        this.sureAdd();
      }
    };
    //点击取消
    handleCancel = () => {
      let obj = this.state;
      obj.isModalVisible = false;
      this.setState(obj);
    };
    modifyDistribute = async (record) => {
      let obj = this.state;
      obj.modelTitle = "修改配送方式";
      obj.isModalVisible = true;
      await this.setState(obj);

      let { formOne } = this.refs.form.refs;
      formOne.setFieldsValue(record);
    };
    addDistribute = async () => {
      let obj = this.state;
      obj.modelTitle = "添加配送方式";
      obj.isModalVisible = true;
      await this.setState(obj);
      let formData = {
        modName: "",
        modValue: "",
      };
      let { formOne } = this.refs.form.refs;
      formOne.setFieldsValue(formData);
    };
    //确认修改
    sureModify = () => {
      let key = ["modId", "modName", "modValue"];
      let { formOne } = this.refs.form.refs;
      let formData = formOne.getFieldsValue(key);
      let { modifyDistribute } = this.props.setStoreInfo;
      console.log(formData);
      modifyDistribute(formData).then((data) => {
        if (data.data.code === 200) {
          message.success("修改成功");
          this.handleCancel();
          this.getInitData();
        } else {
          message.error("修改失败");
        }
      });
    };
    //确认添加
    sureAdd = () => {
      let { formOne } = this.refs.form.refs;
      let key = ["modName", "modValue"];
      let formData = formOne.getFieldsValue(key);
      let { addDistribute } = this.props.setStoreInfo;
      addDistribute(formData).then((data) => {
        if (data.data.code === 200) {
          message.success("添加成功");
          this.handleCancel();
          this.getInitData();
        } else {
          message.error("添加失败");
        }
      });
    };

    render() {
      let methods = {
        handleOk: this.handleOk,
        handleCancel: this.handleCancel,
        addDistribute: this.addDistribute,
      };
      return (
        <div>
          <WarpComponent
            ref="form"
            {...this.state}
            {...methods}
          ></WarpComponent>
        </div>
      );
    }
  }
  return ElementComponent;
};

export default HOCSetDelivery;
